<template>
  <header class="fixed w-full z-50 transition-all duration-500 ease-out" :class="{
    'bg-white/90 backdrop-blur-sm shadow-md py-2 text-gray-700': isScrolled,
    'bg-transparent py-4 text-white': !isScrolled
  }">
    <div class="container mx-auto px-4 lg:px-6">
      <div class="flex items-center justify-between">
        <!-- Logo with animation -->
        <div class="flex items-center">
          <img src="https://img0.baidu.com/it/u=933220220,287299241&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
            alt="Company Logo" class="h-10 lg:h-12 transition-all duration-500 ease-out transform" :class="{
              'scale-90 h-8 lg:h-10': isScrolled,
              'scale-100': !isScrolled
            }">
          <span class="ml-3 text-xl font-bold text-indigo-600 transition-colors duration-500"
            :class="{ 'text-indigo-600': isScrolled, 'text-white': !isScrolled }">
            企业名称
          </span>
        </div>

        <!-- Desktop Navigation with hover effects -->
        <nav class="hidden lg:flex space-x-8">
          <a href="#" class="relative group hover:text-indigo-600 font-medium transition-colors duration-300">
            <span>首页</span>
            <span
              class="absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 group-hover:w-full"></span>
          </a>
          <a href="#home" class="relative group hover:text-indigo-600 font-medium transition-colors duration-300">
            <span>介绍</span>
            <span
              class="absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 group-hover:w-full"></span>
          </a>
          <a href="#about" class="relative group hover:text-indigo-600 font-medium transition-colors duration-300">
            <span>关于我们</span>
            <span
              class="absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 group-hover:w-full"></span>
          </a>
          <a href="#products" class="relative group hover:text-indigo-600 font-medium transition-colors duration-300">
            <span>产品服务</span>
            <span
              class="absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 group-hover:w-full"></span>
          </a>
          <a href="#news" class="relative group hover:text-indigo-600 font-medium transition-colors duration-300">
            <span>新闻中心</span>
            <span
              class="absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 group-hover:w-full"></span>
          </a>
          <a href="#contact" class="relative group hover:text-indigo-600 font-medium transition-colors duration-300">
            <span>联系我们</span>
            <span
              class="absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 transition-all duration-300 group-hover:w-full"></span>
          </a>
        </nav>

        <!-- Mobile Menu Button with animation -->
        <button @click="toggleMenu"
          class="lg:hidden p-2 rounded-md text-white hover:text-indigo-600 focus:outline-none transition-colors duration-300 "
          :class="{
            // bg-indigo-500/60
            'bg-indigo-500/80': isScrolled,
            '': !isScrolled
          }">
          <div class="relative w-6 h-6 ">
            <span class="absolute block w-full h-0.5 bg-current transition-all duration-300 ease-out" :class="{
              'top-1/2 transform -translate-y-1/2 rotate-45': isMenuOpen,
              'top-1/4': !isMenuOpen
            }"></span>
            <span class="absolute block w-full h-0.5 bg-current transition-all duration-300 ease-out" :class="{
              'opacity-0': isMenuOpen,
              'top-1/2 transform -translate-y-1/2': !isMenuOpen
            }"></span>
            <span class="absolute block w-full h-0.5 bg-current transition-all duration-300 ease-out" :class="{
              'top-1/2 transform -translate-y-1/2 -rotate-45': isMenuOpen,
              'top-3/4': !isMenuOpen
            }"></span>
          </div>
        </button>
      </div>

      <!-- Mobile Menu with slide-down animation -->
      <transition enter-active-class="transition-all duration-300 ease-out"
        leave-active-class="transition-all duration-200 ease-in" enter-from-class="opacity-0 max-h-0"
        enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96"
        leave-to-class="opacity-0 max-h-0">
        <div v-show="isMenuOpen" class="lg:hidden overflow-hidden">
          <div class="mt-4 pb-4 space-y-3 bg-white/95 backdrop-blur-sm rounded-lg" @click="isMenuOpen = false">
            <a href="#"
              class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50/50 transition-colors duration-300">
              首页
            </a>
            <a href="#home"
              class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50/50 transition-colors duration-300">
              介绍
            </a>
            <a href="#about"
              class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50/50 transition-colors duration-300">
              关于我们
            </a>
            <a href="#products"
              class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50/50 transition-colors duration-300">
              产品服务
            </a>
            <a href="#news"
              class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50/50 transition-colors duration-300">
              新闻中心
            </a>
            <a href="#contact"
              class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50/50 transition-colors duration-300">
              联系我们
            </a>
          </div>
        </div>
      </transition>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const isMenuOpen = ref(false)
const isScrolled = ref(false)

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>